<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8" />
		<title>购物车</title>
		<style type="text/css">
			table,
			th,
			td {
				border: 2px solid #000000;
				border-collapse: collapse;
				width: 1000px;
				height: 50px;
				text-align: center;
				margin: auto;
			}

			img {
				width: 50px;
				height: 50px;
			}

			.iconfont:hover {
				color: red;
			}

			.num {
				width: 15px;
			}
		</style>
		<script src="https://apps.bdimg.com/libs/jquery/2.1.4/jquery.min.js">
		</script>
		<link rel="stylesheet" type="text/css" href="https://at.alicdn.com/t/font_2855974_4ksdiv6anyu.css" />
	</head>
	<body>
		<table>
			<caption>商品列表</caption>
			<tbody id="uptbody">
				<tr>
					<th>商品名称</th>
					<th>商品图片</th>
					<th>商品价格</th>
					<th>操作</th>
				</tr>
				<tr>
					<td>小米手机1</td>
					<td>
						<img src="../img/0099822e42b4428cb25c4cdebc6ca53d.jpg" />
					</td>
					<td>3999</td>
					<td>
						<span class="iconfont icon-gouwuchekong"></span>
					</td>
				</tr>
				<tr>
					<td>小米手机2</td>
					<td>
						<img src="../img/13f10e47913f9dc82e6c6a6199f413cd.jpg" />
					</td>
					<td>5999</td>
					<td>
						<span class="iconfont icon-gouwuchekong"></span>
					</td>
				</tr>
				<tr>
					<td>小米手机3</td>
					<td>
						<img src="../img/4e75e528fb468aee107f551179aa0799.jpg" />
					</td>
					<td>1999</td>
					<td>
						<span class="iconfont icon-gouwuchekong"></span>
					</td>
				</tr>
				<tr>
					<td>小米手机4</td>
					<td>
						<img src="../img/5a260090e0e08770b0bd865845a4b4ab.jpg" />
					</td>
					<td>8999</td>
					<td>
						<span class="iconfont icon-gouwuchekong"></span>
					</td>
				</tr>
				<tr>
					<td>小米手机5</td>
					<td>
						<img src="../img/68217751d12b1bfd2f9766e458b5e2dd.jpg" />
					</td>
					<td>6999</td>
					<td>
						<span class="iconfont icon-gouwuchekong"></span>
					</td>
				</tr>
			</tbody>
		</table>

		<hr />

		<table>
			<caption>购物车</caption>
			<thead>
				<tr>
					<th>
						<input type="checkbox" />
					</th>
					<th>商品名称</th>
					<th>商品图片</th>
					<th>单价</th>
					<th>数量</th>
					<th>总价</th>
					<th>操作</th>
				</tr>
			</thead>
			<tbody id="shop-tb">
				
			</tbody>
			<tfoot>
				<tr>
					<th colspan="7">购物车总价为:<b id="totalEndPrice"></b>元</th>
				</tr>
			</tfoot>
		</table>

		<script>
			$(function() {
				// $(".addnum").click(function(){
				// 	var oldnum = parseInt($(this).prev().attr("value"));
				// 	$(this).prev().attr("value",oldnum+1);
				// 	//更新单个商品总价
				// 	var Aprice = parseInt($(this).parent().prev().text());  
				// 	var num = parseInt($(this).prev().attr("value"));
				// 	$(this).parent().next().text(Aprice*num);
				// 	//更新购物车总价
				// 	var thistotalprice = 0 ;
				// 	for(var i = 0 ; i < $(".thistotalprice").length ; i++){
				// 		var price = parseInt($(".thistotalprice").eq(i).text());
				// 		thistotalprice += price;
				// 	}
				// 	$("#totalEndPrice").text(thistotalprice);
					
				// });
				// $(".reducenum").click(function(){
				// 	$(this).next().attr("value",$(this).next().attr("value")-1);
				// 	if($(this).next().attr("value")<1){
				// 		$(this).next().attr("value","1");
				// 	}
				// 	//更新单个商品总价
				// 	var Aprice = parseInt($(this).parent().prev().text());  
				// 	var num = parseInt($(this).next().attr("value"));
				// 	$(this).parent().next().text(Aprice*num);
					
				// 	//更新购物车总价
				// 	var thistotalprice = 0 ;
				// 	for(var i = 0 ; i < $(".thistotalprice").length ; i++){
				// 		var price = parseInt($(".thistotalprice").eq(i).text());
				// 		thistotalprice += price;
				// 	}
				// 	$("#totalEndPrice").text(thistotalprice);
				// });
				// $(".iconfont.icon-shanchu").click(function(){
				// 	$(this).parent().parent().remove();
				// });
				
				//当页面加载时，就会注册所有的事件，后面通过jquery新增的内容，再对新增的添加事件$(".item").click(function(){})；页面是不会执行的
				$(document).on("click",".addnum",function(){
					var oldnum = parseInt($(this).prev().attr("value"));
					$(this).prev().attr("value",oldnum+1);
					//更新单个商品总价
					var Aprice = parseInt($(this).parent().prev().text());  
					var num = parseInt($(this).prev().attr("value"));
					$(this).parent().next().text(Aprice*num);
					//更新购物车总价
					var thistotalprice = 0 ;
					for(var i = 0 ; i < $(".thistotalprice").length ; i++){
						var price = parseInt($(".thistotalprice").eq(i).text());
						thistotalprice += price;
					}
					$("#totalEndPrice").text(thistotalprice);
				});
				$(document).on("click",".reducenum",function(){
					$(this).next().attr("value",$(this).next().attr("value")-1);
					if($(this).next().attr("value")<1){
						$(this).next().attr("value","1");
					}
					//更新单个商品总价
					var Aprice = parseInt($(this).parent().prev().text());  
					var num = parseInt($(this).next().attr("value"));
					$(this).parent().next().text(Aprice*num);
					
					//更新购物车总价
					var thistotalprice = 0 ;
					for(var i = 0 ; i < $(".thistotalprice").length ; i++){
						var price = parseInt($(".thistotalprice").eq(i).text());
						thistotalprice += price;
					}
					$("#totalEndPrice").text(thistotalprice);
				});
				$(document).on("click",".iconfont.icon-shanchu",function(){
					$(this).parent().parent().remove();
				});
				$(".iconfont.icon-gouwuchekong").click(function(){
					var itemTds = $(this).parent().parent().children();
					var name = itemTds.eq(0).text();
					var imgSrc = itemTds.eq(1).find("img").attr("src");
					var pic = "../img/" + imgSrc.substring(imgSrc.lastIndexOf("/") + 1);
					var price = itemTds.eq(2).text();
					
					var nameArr = $(".totalName");
					var exist = false;
					for (var i = 0; i < nameArr.length; i++) {
						if (nameArr.eq(i).text() == name) {
							nameArr.eq(i).parent().find(".addnum").click();
							exist = true;
						}
					};
					if (!exist) {
						$("#shop-tb").append(
						"<tr><td><input type='checkbox' /></td><td class='totalName'>" + name + "</td><td><img src='" + pic +"' /></td><td>" + price +
						"</td><td><input type='button' class='reducenum' value='-' /><input class='num' type='text' value='1' /><input type='button' class='addnum'value='+' /></td><td class='thistotalprice'>" +price + "</td><td><span class='iconfont icon-shanchu'></span></td></tr>"
						);
					};
					
					//更新购物车总价
					var thistotalprice = 0 ;
					for(var i = 0 ; i < $(".thistotalprice").length ; i++){
						var price = parseInt($(".thistotalprice").eq(i).text());
						thistotalprice += price;
					};
					$("#totalEndPrice").text(thistotalprice);
				});
			
			
			

		});
		</script>
	</body>
</html>
